<!--
- Author:  LiShibin.
- Date:    2017/7/11 0011.
- File:    list.
-->
<template>
  <div>
    <div class="Web_Box ">
      <div class="Topmenu">
        <i @click="back" class="iconfont icon-youjiantou"><a href=""></a></i>
        <h1>我的订单</h1>
        <span></span>
      </div>
      <div class="dingdanzt" style="position: fixed;top: 0;width: 100%;background: #fff;z-index: 100;">
        <ul>
          <li :class="{'ddon': type == 1}" @click="switchType(1)">
            <p><i class="iconfont icon-wode_daifukuan_weixuanzhong1" ></i></p> 待付款
          </li>
          <li :class="{'ddon': type == 2}" @click="switchType(2)">
            <p><i class="iconfont icon-wode_daifahuo_weixuanzhong1"></i></p> 待发货
          </li>
          <li :class="{'ddon': type == 3}" @click="switchType(3)">
            <p><i class="iconfont icon-wode_daishouhuo_weixuanzhong1"></i></p> 待收货
          </li>
          <li :class="{'ddon': type == 4}" @click="switchType(4)">
            <p><i class="iconfont icon-yiwancheng_weixuanzhong"></i></p> 已完成
          </li>
          <li :class="{'ddon': type == 0}" @click="switchType(0)">
            <p><i class="iconfont icon-quanbudingdan_xuanzhong"></i></p> 全部订单
          </li>
        </ul>
      </div>
      <div class="DistributionOrder" style="padding-top: 5.2rem;">
        <div class="pt10 dingdanxq">
          <div class="SearchBox p20 bg_efeff4" v-show="false">
            <div class="SearchBor xd hidden"><i class="iconfont icon-search lh70"></i>
              <input type="text" class="SearchInp pl80 f26" placeholder="搜索您需要的订单" v-model="keyword">
              <button type="button" class="SearchBut" @click="searchOrder">搜索</button>
            </div>
          </div>
          <ul
            v-infinite-scroll="loadMoreOrder"
            infinite-scroll-disabled="false"
            infinite-scroll-distance="0"
            infinite-scroll-immediate-check="false">
            <li v-for="order in orderList.data">
              <p class="ddxqtop" style="width: auto;padding-top:0.25rem;height: 2.25rem;">订单号：{{order.order_info.order_sn}}
                <span class="ddon fr">{{order.order_info.state_desc}}</span>
              </p>
              <div v-for="(goods, index) in order.order_info.extend_order_goods" class="f-oh f-pr  bor_1_f8  pb20" @click="gotoOrderDetail(order.order_info.order_id)">
                <p>
                  <span class="tp" style="background: #fff;">
                    <img :src="$config.website + '/test.php?sign=' + index + '&image=' + goods.goods_image" alt="" style="width: auto">
                  </span>
                </p>
                <p class="spmz">{{goods.goods_name}}</p>
                <span class="spbq">9.5新未使用</span>
                <span class="dingdanxqjiage ddon">￥{{goods.goods_price}}</span>
                <i class="iconfont icon-more"></i>
              </div>
              <p>
                <span v-show="order.order_info.order_state == $dictionary.orderStatus.sended" @click="confirmReceived(order.order_info.order_id)" class="qfk">确认收货</span>
                <span v-show="order.order_info.order_state == $dictionary.orderStatus.unpay" @click="pay(order)" class="qfk">去付款</span>
                <span v-show="order.order_info.order_state == $dictionary.orderStatus.unpay || order.order_info.order_state == $dictionary.orderStatus.payed && type == 1" @click="cancleOrder(order.order_info.order_id)" class="qx">取消</span>
                <span v-show="type == 3 || type == 4" class="dsh" @click="openWindow(1, order.order_info.order_id)">查看物流</span>
              </p>

              <!--<div class="tit"><span class="fl">订单号：{{order.order_info.order_sn}}</span>-->
                <!--<span v-if="!order.order_info.if_lock" class="fr cr_595757">{{order.order_info.state_desc}}</span>-->
                <!--<span v-else class="fr cr_595757">退款/退货订单</span>-->
              <!--</div>-->
              <!--<div style="margin-bottom: 10px;" class="giftbox f-cb" v-for="goods in order.order_info.extend_order_goods"  @click="gotoOrderDetail(order.order_info.order_id)">-->
                <!--<div class="Pic">-->
                  <!--<img :src="$config.website + $config.goodsImgSrc + goods.goods_image" alt=""/>-->
                <!--</div>-->
                <!--<div class="Con" style="width:11.5rem;">-->
                  <!--<div class="">-->
                    <!--<h2 class="">{{goods.goods_name}}<span v-show="goods.goods_unit != 0" style="color:#b5b5b6;font-size: 0.6rem">({{goods.goods_unit | goodsUnitTxt}})</span>&nbsp;&nbsp;<span v-for="attr in goods.goods_spec">{{attr.name}} </span></h2>-->
                  <!--</div>-->
                  <!--<div class="">-->
                    <!--<span class="Prices" v-show="goods.gc_id != '1038'">￥{{goods.goods_price}}</span>-->
                    <!--<span class="Prices" v-show="goods.gc_id == '1038'"><i class="iconfont icon-zengpin1"></i></span>-->
                    <!--<span class="Num fr">×{{goods.goods_num}}</span>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
              <!--<div class="Operation">-->
                <!--<div class="Deductible">在线支付:￥{{order.order_info.pay_amount || 0}}&nbsp;积分抵扣:￥{{parseInt(order.order_info.integral_amount || 0)}}&nbsp;余额支付:￥{{order.order_info.balance_amount || 0}}</div>-->
                <!--<p class="Total tr">共{{countOrderGoodsNum(order)}}件商品&nbsp;&nbsp;合计:￥{{order.order_info.order_amount || 0}}&nbsp;(运费:￥{{order.order_info.shipping_fee || 0}})</p>-->
                <!--<span class=" pt10 disib f22 fl" v-if="order.order_info.is_self == '1'">自提订单</span>-->
                <!--<span class=" pt10 disib f22 fl" v-else>快递订单</span>-->
                <!--<div class="fr">-->
                  <!--<span class="but1 cr_595757 fr ml20" v-show="!order.order_info.if_lock && order.order_info.order_state == $dictionary.orderStatus.payed" @click="addRefundMoney(order.order_info.order_id, order.order_info.extend_order_goods[0].goods_id)">申请退款 </span>-->
                  <!--<span class="but1 cr_45a73a fr ml20" v-show="order.order_info.order_state == $dictionary.orderStatus.unpay" @click="pay(order)">立即付款 </span>-->
                  <!--<span class="but1 cr_595757 fr ml20" v-show="order.order_info.order_state == $dictionary.orderStatus.unpay" @click="cancleOrder(order.order_info.order_id)">取消订单 </span>-->
                  <!--<span class="but1 cr_45a73a fr ml20" v-show="order.order_info.order_state == $dictionary.orderStatus.sended" @click="confirmReceived(order.order_info.order_id)">确认收货 </span>-->
                  <!--<span class="but1 cr_595757 fr ml20" v-show="order.order_info.order_state == $dictionary.orderStatus.sended" @click="gotoOrderExpress(order.order_info.order_id)">查看物流 </span>-->
                  <!--<span class="but1 fr cr_45a73a ml20" v-show="!order.order_info.if_lock && order.order_info.order_state == $dictionary.orderStatus.recevied && order.order_info.evaluation_state == 0" @click="addComment(order.order_info.order_id)">立即评价 </span>-->
                <!--</div>-->
              <!--</div>-->
            </li>
          </ul>
          <loading-more :allLoaded="orderList.allLoaded" :show="orderList.data.length > 0"></loading-more>
        </div>
      </div>

      <div class="wuliutcbg" v-show="sign == 1">
        <div class="wuliutc">
          <span class="wuliutcguanbi"><i class="iconfont icon-guanbi"  @click="openWindow(0)"></i></span>
          <p class="wuliutctop">订单物流</p>
          <div class="wuliutc_main">
            <ul>
              <li v-for="(item, index) in orderExpress.data">
                <div class="tixianjilu_time">{{item.time}}
                  <div class="tixianjilu_zhuangtaidian touying"><span class="on" v-show="index == 0"></span><span class="on" v-show="index != 0"></span></div>
                </div>
                <div class="tixianjilu_right">
                  <p class="tixianjilu_right_p2" :class="{'on': index == 0}">{{item.status}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

    </div>
    <empty-data :show="orderList.allLoaded && orderList.data.length <= 0" style="margin-top: 1rem"></empty-data>
  </div>
</template>

<script>
  import {MessageBox} from 'mint-ui'
  import payPop from '../../components/payPop'

  export default{
    data() {
      return {
        type: this.$route.query.type || 0, // 默认0，全部类型
        keyword: '', // 搜索关键字
        orderList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        sign: 0,
        orderExpress: {data: []}
      }
    },
    components: {},
    created() {
      this.getOrderList(this.type, this.orderList.page, this.orderList.pageSize)
    },
    watch: {
      $route () {
        this.type = this.$route.query.type
        this.initOrderList()
        this.getOrderList(this.type, this.orderList.page, this.orderList.pageSize)
      }
    },
    methods: {
      getOrderExpress(id) {
        this.$request.getOrderExpress(id).then(data => {
          if (data && data.data) {
            this.orderExpress = data
            for (let i = 0; i < data.data.length; i++) {
              console.log(this.orderExpress.data[i]['time'])
              this.orderExpress.data[i]['time'] = this.orderExpress.data[i]['time'].substr(5)
            }
          }
        }).catch(e => {
          this.$toast('获取物流信息失败' + e.msg)
        })
      },
      openWindow(key, order_id) {
        this.sign = key
        console.log(order_id)
        if (key == 1) {
          this.getOrderExpress(order_id)
        }
      },
      back() {
        this.$router.go(-1)
      },
      countOrderGoodsNum(order) {
        let count = 0
        if (!order.order_info || !order.order_info.extend_order_goods) {
          return count
        }
        for (let i = 0; i < order.order_info.extend_order_goods.length; i++) {
          count += parseInt(order.order_info.extend_order_goods[i].goods_num)
        }
        return count
      },
      gotoOrderExpress(id) {
        this.$router.push({name: 'order-express', params: {id: id}})
      },
      gotoOrderDetail(id) {
        this.$router.push({name: 'order-detail', params: {id: id}})
      },
      switchType(value) {
//        this.type = value
//        this.initOrderList()
//        this.getOrderList(this.type, this.orderList.page, this.orderList.pageSize)
        this.$router.replace({name: 'order-list', query: {type: value}})
      },
      initOrderList() {
        this.orderList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      },
      getOrderList(type, page, pageSize) {
        this.orderList.loading = true
        this.$request.getOrderList(type, page, pageSize).then(data => {
          if (data.length < this.orderList.pageSize) {
            this.orderList.allLoaded = true
          }
          this.orderList.data = [...this.orderList.data, ...data]
        }).finally(() => {
          this.orderList.requested = true
          this.orderList.loading = false
        })
      },
      loadMoreOrder() {
        if (this.orderList.loading || this.orderList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getOrderList(this.type, ++this.orderList.page, this.orderList.pageSize)
        }, 500)
      },
      cancleOrder(id) {
        MessageBox.confirm(`你确定要取消订单吗?`).then(action => {
          this.$request.cancleOrder(id).then(data => {
            this.$toast('取消订单成功')
            this.initOrderList()
            this.getOrderList(this.type, this.orderList.page, this.orderList.pageSize)
          }).catch(e => {
            this.$toast('取消订单失败：' + e.msg)
          })
        }).catch(() => {
        })
      },
      searchOrder() {
      },
      addComment(id) {
        this.$router.push({name: 'comment-add', params: {id: id}})
      },
      addRefundGoods(orderId, goodsId) {
        this.$router.push({name: 'refund-goods-add', params: {orderId: orderId, goodsId: goodsId}})
      },
      addRefundMoney(orderId, goodsId) {
        this.$router.push({name: 'refund-money-add', params: {orderId: orderId, goodsId: goodsId}})
      },
      confirmReceived(id) {
        this.$request.confirmReceived(id).then(data => {
          this.$toast('确认收货成功')
          for (let i = 0; i < this.orderList.data.length; i++) {
            if (this.orderList.data[i].order_info.order_id == id) {
              this.orderList.data.splice(i, 1)
              break
            }
          }
        }).catch(e => {
          this.$toast('确认收货失败：' + e.msg)
        })
      },
      pay(order) {
        let paySn = order.order_info.pay_sn
        payPop({paySn: paySn, orderId: order.order_info.order_id})
      }
    }
  }
</script>

<style>
  .but1 {
    display: inline-block;
    height: 1.3rem;
    line-height: 1.25rem;
    text-align: center;
    font-size: 0.6rem;
    border: #dcdddd solid 1px;
    border-radius: 0.125rem;
    padding: 0 0.375rem;
  }
  .dingdanxq ul li{margin-bottom: 10px;}
</style>
